<template>
  <div class="detail">
    <comRNav title="商品详情" />
    <van-swipe class="carousel">
      <van-swipe-item>
        <img src="../assets/FindImg/7.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/FindImg/8.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/FindImg/9.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/FindImg/10.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/FindImg/11.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/FindImg/12.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/FindImg/13.jpg" alt="">
      </van-swipe-item>
    </van-swipe>
    <div class="FlashSale">
      <img src="../assets/FindImg/14.png" alt="">
      <span>￥999</span>
    </div>
    <div class="price">
      <div class="Done">
        <h1>{{gname}}</h1>
      </div>
      <div class="Dtwo"></div>
      <ul class="Uone">
        <li>￥{{nprice}}</li>
        <li>￥{{oprice}}</li>
        <li>可用优惠券</li>
        <li>不可用优惠券</li>
      </ul>
    </div>
    <div class="size">
      <!-- 点击弹窗 -->
      <van-cell is-link @click="showPopup">
        <p>
          "已选&nbsp;&nbsp;"
          <span class="Sone">
            "红/粉/玫瑰红 /"
            <em>尺码</em>
          </span>
        </p>
      </van-cell>
      <!-- 弹窗 -->
      <van-popup v-model="show" position="bottom" get-container="body" closeable close-icon="close">
        <div class="Popupd">
          <div class="Popupi">
            <img src="../assets/FindImg/50.jpg" alt="">
          </div>
          <p class="Popupp">
            <span>￥799</span>
            <span>红/粉/玫瑰红/尺码</span>
          </p>
        </div>
        <!-- <img class="Img" src="../assets/FindImg/52.png" alt=""> -->
        <div class="Popupv">
          <dl class="Popupl">
            <dt>颜色:</dt>
            <dd>
              <img :src="item.picture" alt="" v-for="(item,index) in colorArr" :key="index">
            </dd>
          </dl>
          <dl class="Popupdl">
            <dt>尺码:</dt>
            <dd>
              <i v-for="(item,index) in sizeArr" :key="index">{{item.size}}</i>
            </dd>
          </dl>
        </div>
        <van-goods-action>
          <van-goods-action-icon icon="star" text="收藏" type="button" @click="star()" />
          <van-goods-action-icon icon="cart-o" text="购物车" @click="handleCart" />
          <van-goods-action-button type="warning" text="加入购物车" />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </van-popup>
    </div>
    <div class="brand">
      <p>
        <span>品牌:</span>
        "耐克"
        <br>
        <span>发货:百丽优购</span>
        <img src="../assets/FindImg/16.jpg" alt="">
      </p>
    </div>
    <!-- <div class="like">
      <div class="likes">
        <p>喜欢此商品的人还买了</p>
      </div>
      <ul class="Utwo">
        <li>
          <img src="../assets/FindImg/17.jpg" alt="">
          <p class="Pone">Nike耐克</p>
          <p><span>￥279</span></p>
        </li>
        <li>
          <img src="../assets/FindImg/18.jpg" alt="">
          <p class="Pone">Nike耐克</p>
          <p><span>￥279</span></p>
        </li>
        <li>
          <img src="../assets/FindImg/19.jpg" alt="">
          <p class="Pone">Nike耐克</p>
          <p><span>￥279</span></p>
        </li>
        <li>
          <img src="../assets/FindImg/20.jpg" alt="">
          <p class="Pone">Nike耐克</p>
          <p><span>￥279</span></p>
        </li>
        <li>
          <img src="../assets/FindImg/21.jpg" alt="">
          <p class="Pone">Nike耐克</p>
          <p><span>￥279</span></p>
        </li>
        <li>
          <img src="../assets/FindImg/22.jpg" alt="">
          <p class="Pone">Nike耐克</p>
          <p><span>￥279</span></p>
        </li>
      </ul>
    </div> -->
    <div class="service">
      <p>
        "联系客服"
      </p>
    </div>
    <van-tabs v-model="active" class="details">
      <van-tab title="详情">
        <div class="Details">
          <dl class="Dl">
            <dt>商品参数</dt>
            <dd>
              <ul>
                <li>商品编号：101408913</li>
                <li>色系：红色</li>
                <li>运动款式：开衫</li>
                <li>版型：标准</li>
              </ul>
            </dd>
          </dl>
          <dl class="Dlone">
            <dt>尺码对照表</dt>
            <dd>
              <img src="../assets/FindImg/25.png" alt="">
            </dd>
          </dl>
          <dl class="Dltwo">
            <dt>图文详情</dt>
            <dd class="Dldd">
              <div>
                <p>
                  <span>￥799</span>
                  "即销售价或因开展不同的优惠活动而设定的即时售价。"
                </p>
                <p>
                  <span class="pspan">￥899</span>
                  "品牌商建议零售价或牌价。"
                </p>
              </div>
            </dd>
            <dd>
              <img src="../assets/FindImg/26.jpg" alt="">
              <img src="../assets/FindImg/27.jpg" alt="">
              <img src="../assets/FindImg/28.jpg" alt="">
              <img src="../assets/FindImg/29.jpg" alt="">
              <img src="../assets/FindImg/30.jpg" alt="">
              <img src="../assets/FindImg/31.jpg" alt="">
              <img src="../assets/FindImg/32.jpg" alt="">
              <img src="../assets/FindImg/33.jpg" alt="">
            </dd>
          </dl>
        </div>
      </van-tab>
      <van-tab title="评价">
        <div class="details1">
          <div class="Details1">
            <div>
              <img src="../assets/FindImg/35.png" alt="">
              <img src="../assets/FindImg/35.png" alt="">
              <img src="../assets/FindImg/35.png" alt="">
              <img src="../assets/FindImg/35.png" alt="">
              <img src="../assets/FindImg/35.png" alt="">
            </div>
            <p><span>0.0</span>分</p>
          </div>
          <ul class="Details1-ul">
            <li>全部</li>
            <li>晒单（0）</li>
          </ul>
          <p class="Details1-p">暂无评论</p>
          <div class="Details1-d"></div>
        </div>
      </van-tab>
      <van-tab title="推荐">
        <div class="details2">
          <ul>
            <li>
              <img src="../assets/FindImg/36.jpg" alt="">
              <p>NIKE耐克男</p>
              <p>159</p>
            </li>
            <li>
              <img src="../assets/FindImg/37.jpg" alt="">
              <p>NIKE耐克男</p>
              <p>539</p>
            </li>
            <li>
              <img src="../assets/FindImg/38.jpg" alt="">
              <p>NIKE耐克男</p>
              <p>589</p>
            </li>
            <li>
              <img src="../assets/FindImg/39.jpg" alt="">
              <p>NIKE耐克202</p>
              <p>155</p>
            </li>
            <li>
              <img src="../assets/FindImg/40.jpg" alt="">
              <p>NIKE耐克女</p>
              <p>475</p>
            </li>
            <li>
              <img src="../assets/FindImg/41.jpg" alt="">
              <p>NIKE耐克202</p>
              <p>249</p>
            </li>
            <li>
              <img src="../assets/FindImg/42.jpg" alt="">
              <p>NIKE耐克女</p>
              <p>249</p>
            </li>
            <li>
              <img src="../assets/FindImg/43.jpg" alt="">
              <p>NIKE耐克202</p>
              <p>359</p>
            </li>
            <li>
              <img src="../assets/FindImg/44.jpg" alt="">
              <p>NIKE耐克202</p>
              <p>585</p>
            </li>
            <li>
              <img src="../assets/FindImg/45.jpg" alt="">
              <p>NIKE耐克男</p>
              <p>359</p>
            </li>
            <li>
              <img src="../assets/FindImg/46.jpg" alt="">
              <p>NIKE耐克女</p>
              <p>600</p>
            </li>
            <li>
              <img src="../assets/FindImg/47.jpg" alt="">
              <p>NIKE耐克202</p>
              <p>259</p>
            </li>
            <li>
              <img src="../assets/FindImg/48.jpg" alt="">
              <p>NIKE耐克202</p>
              <p>229</p>
            </li>
            <li>
              <img src="../assets/FindImg/49.jpg" alt="">
              <p>NIKE耐克男</p>
              <p>369</p>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
    <van-goods-action>
      <van-goods-action-icon icon="star" text="收藏" type="button" @click="star()" />
      <!-- 点击购物车 -->
      <van-goods-action-icon icon="cart-o" text="购物车" @click="handleCart" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import comRNav from "../components/comRNav";
import { Toast } from "vant";
import { Overlay } from "vant";
import { Popup } from "vant";
import { getGoodsDetail } from "../utils/detail";
import { addCart } from "../utils/cart";
export default {
  name: "detail",
  data() {
    return {
      picture: [],
      nprice: "",
      oprice: "",
      gname: "",
      active: 0,
      show: false,
      lockScroll: true,
      colorArr: [],
      sizeArr: []
    };
  },
  created() {
    addCart({
      uid: Number(localStorage.getItem("uid")),
      gid: 1,
      iid: 1,
      cid: 1,
      sid: 2
    }).then(res => {
      console.log(res)
      
    });
  },
  methods: {
    unique(arr) {
      const res = new Map();
      return arr.filter(arr => !res.has(arr.color) && res.set(arr.color, 1));
    },
    unique1(arr) {
      const res = new Map();
      return arr.filter(arr => !res.has(arr.sid) && res.set(arr.sid, 1));
    },
    star() {
      Toast("收藏成功");
    },
    showPopup() {
      this.show = true;
      this.lockScroll = false;
    },
    handleCart() {
      this.$router.push("/shoppingCart");
    }
  },
  components: {
    comRNav
  },
  mounted() {
    console.log(this.$route.query.gid);
    getGoodsDetail({ gid: this.$route.query.gid }).then(res => {
      console.log(res[0].gname);
      this.gname = res[0].gname;
      this.nprice = res[0].nprice;
      this.oprice = res[0].oprice;
      console.log(this.gname);
      let dataList = res;
      let arr = [];
      res.forEach(item => {
        arr.push({
          cid: item.cid,
          color: item.color,
          picture: item.picture
        });
      });
      let arr1 = [];
      dataList.forEach(item => {
        arr1.push({
          sid: item.sid,
          size: item.size
        });
      });

      this.sizeArr = this.unique1(arr1);
      console.log(this.sizeArr);
      this.colorArr = this.unique(arr);
      console.log(this.colorArr);
    });
  }
};
</script>

<style scoped>
.detail {
  background-color: #ebebeb;
}
.van-swipe-item {
  background-color: #fff;
}
.carousel {
  width: 100%;
  height: 235px;
  text-align: center;
}
.carousel img {
  width: 235px;
  height: 235px;
}
.FlashSale {
  position: relative;
  margin-top: -8%;
  z-index: 10;
}
.FlashSale img {
  width: 100%;
}
.FlashSale span {
  position: absolute;
  top: 50%;
  left: 76%;
  font-size: 16px;
  width: 21%;
  color: #fff;
  text-align: center;
  font-weight: 700;
}
.price {
  padding: 6px 12px 0 12px;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
}
.price .Done {
  min-height: 36px;
}
.price .Done h1 {
  border-right-width: initial;
  border-right-style: none;
  border-right-color: initial;
  float: left;
  width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  color: #666;
  padding-right: 6px;
  min-height: 36px;
}
.price .Dtwo {
  color: #ff0000;
  font-size: 12px;
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 34px;
  line-height: 16px;
  padding-top: 4px;
}
.price .Uone {
  padding-top: 6px;
  padding-right: 0px;
  padding-bottom: 6px;
  padding-left: 0px;
  overflow: hidden;
}
.price .Uone li {
  width: auto;
  height: 30px;
  line-height: 30px;
  float: left;
  overflow: hidden;
}
.price .Uone li:nth-of-type(1) {
  display: inline-block;
  margin-right: 6%;
  color: #ff0000;
}
.price .Uone li:nth-of-type(2) {
  display: inline-block;
  width: auto;
  color: #a0a0a0;
  font-size: 14px;
  line-height: 34px;
  padding-left: 5px;
  text-decoration-line: line-through;
}
.price .Uone li:nth-of-type(3) {
  width: auto;
  color: #a0a0a0;
  float: right;
  color: #a0a0a0;
  font-size: 12px;
}
.price .Uone li:nth-of-type(4) {
  display: none;
  color: #a0a0a0;
  font-size: 12px;
}
.size {
  height: 35px;
  line-height: 35px;
  padding: 2px 12px;
  background-color: #fff;
  background-color: #fff;
  border-top: 6px solid #eee;
  border-bottom: 6px solid #eee;
}
.size p {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #666;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.size p .Sone {
  color: #333;
}
.size p .Sone em {
  font-style: normal;
}
.size .van-cell {
  padding: 0;
}
.size .van-icon-arrow::before {
  content: "";
  width: 8px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 10px;
  background: url(../assets/FindImg/15.png) center center no-repeat;
  background-size: 8px 12px;
}
/* 弹窗 */

.van-popup .Popupd {
  padding-top: 40px;
  position: relative;
  box-sizing: border-box;
}

.van-popup .Popupd .Popupi {
  width: 102px;
  height: 102px;
  border: 1px solid #ccc;
  position: absolute;
  bottom: 12px;
  left: 12px;
  border-radius: 3px;
  background-color: #fff;
}

.van-popup .Popupd .Popupi img {
  width: 100%;
}

.van-popup .Popupd .Popupp {
  padding-left: 144px;
  padding-bottom: 18px;
  margin: 0;
}

.van-popup .Popupd .Popupp span {
  height: 26px;
  color: #ff0000;
  font-size: 16px;
  display: block;
}

.van-popup .Popupd .Popupp span:nth-of-type(2) {
  font-style: normal;
  color: #333;
  font-size: 12px;
  height: 18px;
}

.van-popup .Popupv {
  width: 100%;
  height: 306px;
  padding: 0 12px 20px;
  box-sizing: border-box;
}

.van-popup .Popupv .Popupl {
  width: 351px;
  height: 74px;
  padding-bottom: 5px;
  margin: 0;
}

.van-popup .Popupv .Popupl dt {
  width: 351px;
  height: 28px;
  color: #333;
  font-size: 13px;
}

.van-popup .Popupv .Popupl dd {
  width: 351px;
  height: 40px;
  margin: 0;
  padding-left: 6px;
}

.van-popup .Popupv .Popupl dd img {
  width: 30px;
  height: 30px;
  border: 1px solid #ff0000;
}

.van-popup .Popupv .Popupdl {
  width: 351px;
  height: 67px;
  padding-top: 5px;
  margin: 0;
}

.van-popup .Popupv .Popupdl dt {
  width: 351px;
  height: 28px;
  color: #333;
  font-size: 13px;
}

.van-popup .Popupv .Popupdl dd {
  width: 351px;
  height: 34px;
  margin: 0;
  padding-left: 6px;
}

.van-popup .Popupv .Popupdl dd i {
  float: left;
  display: block;
  width: 36px;
  height: 24px;
  background: #ddd;
  padding: 0px 8px;
  line-height: 24px;
  font-size: 12px;
  color: #666;
  margin-right: 5px;
  box-sizing: border-box;
}
.brand {
  height: 59px;
  background: #fff;
  padding: 12px;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  width: 100%;
  position: relative;
}
.brand p {
  padding-left: 70px;
  box-sizing: border-box;
  font-size: 12px;
  color: #333;
  width: 351px;
  height: 32px;
  position: relative;
  display: block;
}
.brand p:before {
  content: "";
  width: 8px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 10px;
  background: url(../assets/FindImg/15.png) center center no-repeat;
  background-size: 8px 12px;
}
.brand p span {
  color: #666;
}
.brand p img {
  width: 61px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ddd;
}
.like {
  background-color: #fff;
  overflow: hidden;
}
.like .likes {
  height: 35px;
  line-height: 35px;
  padding: 2px 12px;
  background-color: #fff;
}
.like .likes p {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #666;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.like .likes p:before {
  content: "";
  width: 8px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 10px;
  background: url(../assets/FindImg/15.png) center center no-repeat;
  background-size: 8px 12px;
}
.like .Utwo {
  border-top: 1px solid #ddd;
  padding-top: 10px;
  padding-right: 12px;
  padding-bottom: 0px;
  padding-left: 12px;
  position: relative;
}
.like .Utwo li {
  width: 33.3%;
  overflow: hidden;
  float: left;
  padding: 0px 3px;
  font-family: arial;
  border: none;
  font-size: 12px;
  box-sizing: border-box;
  margin-bottom: 10px;
  background: #fff;
  position: relative;
  display: list-item;
  text-align: match-parent;
}
.like .Utwo li img {
  display: block;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
}
.like .Utwo li .Pone {
  color: #666;
  font-family: arial;
  text-align: left;
  margin: 0 4.5%;
  line-height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 100;
  font-size: 14px;
}
.like .Utwo li p {
  position: relative;
}
.like .Utwo li p span {
  font-size: 15px;
  color: rgb(222, 3, 2);
  margin-right: 2%;
  float: left;
  line-height: 56px;
  height: 56px;
  padding-top: 2px;
}
.service {
  width: 100%;
  height: 60px;
  background: url(../assets/FindImg/23.png) 12px center no-repeat;
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
  padding-right: 12px;
  border-top: 5px solid #ececec;
  border-bottom: 5px solid #ececec;
  box-sizing: border-box;
  background-size: 20px 20px;
}
.service p {
  width: 321px;
  height: 32px;
  margin-left: 30px;
  line-height: 32px;
  font-size: 14px;
  color: #333333;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.service p:before {
  content: "";
  width: 8px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 10px;
  background: url(../assets/FindImg/15.png) center center no-repeat;
  background-size: 8px 12px;
}
.details .Details {
  background: #fff;
}
.details .Details .Dl {
  height: 97px;
  padding: 10px 0;
}
.details .Details .Dl dt {
  height: 30px;
  margin-bottom: 7px;
  line-height: 30px;
  color: #000;
  padding: 0 12px;
  background: #eee url(../assets/FindImg/24.jpg) left center;
  background-repeat: repeat-x;
}
.details .Details .Dl dd {
  overflow: hidden;
  position: relative;
  padding: 0 12px;
}
.details .Details .Dl dd ul {
  font-size: 12px;
  color: #666;
  position: relative;
}
.details .Details .Dl dd ul li {
  margin: 0;
  padding-right: 10px;
  width: 50%;
  float: left;
  padding: 0;
  padding-top: 2px;
  font-size: 12px;
}
.details .Details .Dlone {
  height: 232px;
  padding: 10px 0;
  margin-bottom: 6px;
  width: 100%;
  background: #fff;
  margin: 4px 0;
}
.details .Details .Dlone dt {
  height: 30px;
  margin-bottom: 7px;
  line-height: 30px;
  color: #000;
  padding: 0 12px;
  background: #eee url(../assets/FindImg/24.jpg) left center;
  background-repeat: repeat-x;
}
.details .Details .Dlone dd {
  width: 100%;
  height: 174px;
}
.details .Details .Dlone dd img {
  width: 100%;
}
.details .Details .Dltwo {
  padding: 10px 0;
  border: none;
  box-sizing: border-box;
  margin-bottom: 6px;
  width: 100%;
  background: #fff;
  margin: 4px 0;
}
.details .Details .Dltwo dt {
  height: 30px;
  margin-bottom: 7px;
  line-height: 30px;
  color: #000;
  padding: 0 12px;
  background: #eee url(../assets/FindImg/24.jpg) left center;
  background-repeat: repeat-x;
}
.details .Details .Dltwo .Dldd {
  width: 351px;
  height: 47px;
  color: #666666;
  padding: 0 12px;
  font-size: 12px;
}
.details .Details .Dltwo .Dldd div {
  width: 351px;
  height: 47px;
  padding: 3px 0 10px;
  text-align: left;
  color: #252525;
}
.details .Details .Dltwo .Dldd div p {
  width: 304px;
  height: 13px;
  font-size: 10px;
  line-height: 13px;
  position: relative;
  margin-bottom: 8px;
  padding-left: 47px;
}
.details .Details .Dltwo .Dldd div p span {
  color: #de0302;
  display: inline-block;
  width: 62px;
  font-weight: bold;
  font-size: 16px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.details .Details .Dltwo .Dldd div p .pspan {
  color: #8e8e8e;
  text-decoration: line-through;
  font-size: 12px;
  display: inline-block;
  width: 62px;
  font-weight: bold;
  position: absolute;
  top: 0px;
  left: 0px;
}
.details .Details .Dltwo dd {
  padding: 0 12px;
}
.details .Details .Dltwo dd img:nth-of-type(1) {
  width: 351px;
  height: 506px;
}
.details .Details .Dltwo dd img:nth-of-type(2) {
  width: 351px;
  height: 388px;
}
.details .Details .Dltwo dd img:nth-of-type(3) {
  width: 351px;
  height: 359px;
}
.details .Details .Dltwo dd img:nth-of-type(4) {
  width: 351px;
  height: 359px;
}
.details .Details .Dltwo dd img:nth-of-type(5) {
  width: 351px;
  height: 382px;
}
.details .Details .Dltwo dd img:nth-of-type(6) {
  width: 351px;
  height: 77px;
}
.details .Details .Dltwo dd img:nth-of-type(7) {
  width: 351px;
  height: 160px;
}
.details .Details .Dltwo dd img:nth-of-type(8) {
  width: 351px;
  height: 277px;
}
.van-goods-action-button {
  border-radius: 0;
}
/* 评价 */
.details .details1 {
  display: block;
}
.details .Details1 {
  width: 100%;
  height: 62px;
  float: left;
  background: #fff;
  margin-bottom: 6px;
}
.details .Details1 div {
  width: 180.25px;
  height: 62px;
  padding: 18px;
  float: left;
  box-sizing: border-box;
}
.details .Details1 p {
  float: right;
  padding: 23px 18px 0 0;
  color: #333;
  font-size: 18px;
}
.details .Details1-ul {
  width: 100%;
  height: 51px;
  display: flex;
  align-items: center;
  background-color: #fff;
}
.details .Details1-ul li {
  width: 90px;
  height: 27px;
  font-size: 12px;
  color: #a0a0a0;
  text-align: center;
  line-height: 25px;
  border: 1px solid #ddd;
  border-radius: 3px;
}
.details .Details1-ul li:nth-of-type(1) {
  margin-left: 18px;
  color: #ff0000;
  border: 1px solid #ff0000;
}
.details .Details1-p {
  width: 100%;
  text-align: center;
  padding-top: 10px;
  color: #666666;
  font-size: 12px;
}
.details .Details1-d {
  height: 100px;
}
/* 推荐 */
.details .details2 {
  display: block;
  background: #fff;
  min-height: 697px;
  max-width: 640px;
  margin: 0 auto;
  margin-bottom: 44px;
}
.details .details2 ul {
  padding-top: 10px;
  padding: 12px 12px 0;
  position: relative;
}
.details .details2 ul li {
  width: 33.3%;
  overflow: hidden;
  float: left;
  padding: 0px 3px;
  font-family: arial;
  border: none;
  font-size: 15px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.details .details2 ul li img {
  border: 1px solid #ddd;
  display: block;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.details .details2 ul li p {
  color: #666;
  font-family: arial;
  text-align: left;
  margin: 0 4.5%;
  line-height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  float: none;
  font-weight: 100;
  font-size: 14px;
}
.details .details2 ul li p:nth-of-type(2) {
  color: rgb(255, 0, 0);
  margin-right: 2%;
  font-weight: 700;
  display: inline-block;
  line-height: 56px;
  height: 56px;
  padding-top: 2px;
}

/* 返回顶部 */
</style>